<template>
  <view>
    <!-- <dao :left="false" title="设备配网" /> -->

    <div class="peiwang">
      <view>
        <view style="font-size: 20px; text-align: center; margin: 50rpx"
          >选择路由WIFI</view
        >
        <view>
          <!-- <view
        style="width: 100%; height: 2rpx; background-color: #f7f7f7"
      ></view> -->
          <view @click="huoqu" class="box">
            <text class="title">WIFI</text>
            <view style="width: 60%; text-align: left"> {{ WIFIName }}</view>
            <uni-icons type="right" size="20"></uni-icons>
          </view>

          <!-- <view
        style="width: 100%; height: 2rpx; background-color: #f7f7f7"
      ></view> -->
        </view>
        <!-- <uni-forms
      :border="true"
      ref="valiForm"
      :rules="data.rules"
      :modelValue="data.valiFormData"
    >
      <uni-forms-item name="age">
        <uni-easyinput
          :inputBorder="false"
          :clearable="false"
          v-model="data.valiFormData.password"
          placeholder="请输入密码"
        >
        </uni-easyinput>
      </uni-forms-item>
    </uni-forms> -->
        <view class="box">
          <text class="title">密码</text>
          <view style="width: 70%">
            <uni-easyinput
              :inputBorder="false"
              v-model="password"
              @iconClick="iconClick"
              :clearSize="0"
            >
            </uni-easyinput>
          </view>
          <view style="width: 1px; height: 1px"> </view>
        </view>
        <uni-popup
          :mask-click="false"
          background-color="#fff"
          ref="popup"
          type="bottom"
        >
          <view style="height: 500rpx; background-color: #fff; padding: 10rpx">
            <view
              style="display: flex; justify-content: space-between; width: 100%"
            >
              <button
                @click="guan"
                style="margin: 0; background-color: #e64340"
                type="primary"
              >
                取消
              </button>
              <button
                @click="que"
                style="margin: 0; background-color: #21afff"
                type="primary"
              >
                确定
              </button>
            </view>
            <picker-view
              :immediate-change="true"
              :indicator-style="indicatorStyle"
              :value="value"
              @change="bindChange"
              class="picker-view"
            >
              <picker-view-column>
                <view
                  class=".item"
                  v-for="(item, index) in wifiList"
                  :key="index"
                  >{{ item }}</view
                >
              </picker-view-column>
            </picker-view></view
          >
        </uni-popup>

        <button
          @click="pei"
          type="primary"
          style="background-color: #21afff; margin: 0 20rpx; margin-top: 100rpx"
        >
          一键配网
        </button>
      </view>
    </div>
  </view>
</template>

<script setup>
import dao from "../../pages/conpments/daohang.vue";
import { onMounted, ref, reactive } from "vue";
const valiForm = ref(null);
const data = reactive({
  // 校验表单数据
});
const indicatorStyle = `height: 50px;`;
uni.startWifi({
  success(res) {},
  fail(res) {
    console.log(res);
    uni.showToast({
      title: "请打开WIFI",
      icon: "none",
      duration: 1000,
    });
  },
});
const xuan = ref("");
const bindChange = (e) => {
  xuan.value = wifiList.value[e.detail.value[0]];
  console.log(xuan.value);
};
const password = ref("");
const popup = ref(null);
let BSSID = ref("");
let WIFIName = ref("");

let wifiList = ref([]);
uni.getConnectedWifi({
  success(res) {
    BSSID.value = res.wifi.BSSID;
    WIFIName.value = res.wifi.SSID;
    wifiList.value.push(WIFIName.value);
  },
  fail(res) {
    //报错的相关处理
  },
});

const huoqu = () => {
  if (wifiList.value.length < 2) {
    uni.getWifiList({
      success(res) {
        console.log(res);
        uni.onGetWifiList(function (res) {
          console.log("获取wifi列表");
          console.log(res.wifiList);
          wifiList.value = [];
          //通过遍历将WIFI名字存入集合，以便下卡框等组件使用
          for (var i = 0; i < res.wifiList.length; i++) {
            if (res.wifiList[i].SSID.length)
              wifiList.value.push(res.wifiList[i].SSID);
          }
        });
      },
      fail(res) {
        uni.showModal({
          title: "获取失败",
          content: res.result,
          showCancel: false,
          confirmText: "收到",
        });
        //报错的相关处理
      },
    });
  } else {
    popup.value.open("bottom");
  }
};
const que = () => {
  WIFIName.value = xuan.value;
  popup.value.close();
};
const guan = () => {
  popup.value.close();
};

const pei = () => {
  if (!password.value.length)
    return uni.showToast({
      icon: "none",
      title: "密码不能为空",
      duration: 500,
    });

  let SSID = ref("");
  // #ifdef MP-WEIXIN
  const airkiss = requirePlugin("airkiss");

  SSID.value = WIFIName.value;
  if (SSID.value != "" && password.value != "") {
    uni.showLoading({
      title: "配网中请稍后..",
    });
    airkiss.startAirkiss(SSID.value, password.value, function (res) {
      console.log(res);
      switch (res.code) {
        case 0:
          uni.hideLoading();
          uni.showModal({
            title: "初始化失败",
            content: res.result,
            showCancel: false,
            confirmText: "收到",
          });
          break;
        case 1:
          uni.hideLoading();
          uni.showModal({
            title: "配网成功",
            content: "设备IP：" + res.ip + "\r\n 设备Mac：" + res.bssid,
            showCancel: false,
            confirmText: "添加设备",
            success(ress) {
              if (ress.confirm) {
                uni.navigateTo({
                  url: "/subpkg/dati/index",
                  success: function (resss) {
                    // 通过eventChannel向被打开页面传送数据
                    resss.eventChannel.emit("acceptDataFromOpenerPage", {
                      data: res.bssid,
                    });
                  },
                });
              } else if (ress.cancel) {
                console.log("用户点击取消");
              }
            },
          });
          break;
        case 2:
          uni.hideLoading();
          uni.showModal({
            title: "配网失败",
            content: "请检查密码是否正确",
            showCancel: false,
            confirmText: "收到",
          });
          break;

        default:
          uni.hideLoading();
          break;
      }
    });
  } else {
    uni.showToast({
      title: "请选择WIFI并输入密码",
      icon: "none",
      duration: 1000,
    });
  }
  // #endif
};
let SSID = ref("");
// // #ifdef MP-WEIXIN
// const airkiss = requirePlugin("airkiss");
// if (wifiList.value.length == 0) {
//   SSID.value = this.WIFIName;
// } else {
//   SSID.value = wifiList.value[this.value];
// }
// if (SSID.value != "" && this.password != "") {
//   console.log(airkiss);
//   uni.showLoading({
//     title: "配网中请稍后..",
//   });
//   airkiss.startAirkiss(SSID.value, this.password, function (res) {
//     console.log(res);
//     switch (res.code) {
//       case 0:
//         uni.hideLoading();
//         uni.showModal({
//           title: "初始化失败",
//           content: res.result,
//           showCancel: false,
//           confirmText: "收到",
//         });
//         break;
//       case 1:
//         uni.hideLoading();
//         uni.showModal({
//           title: "配网成功",
//           content: "设备IP：" + res.ip + "\r\n 设备Mac：" + res.bssid,
//           showCancel: false,
//           confirmText: "好的",
//         });
//         break;
//       case 2:
//         uni.hideLoading();
//         uni.showModal({
//           title: "配网失败",
//           content: "请检查密码是否正确",
//           showCancel: false,
//           confirmText: "收到",
//         });
//         break;

//       default:
//         uni.hideLoading();
//         break;
//     }
//   });
// } else {
//   uni.showToast({
//     title: "请选择WIFI并输入密码",
//     icon: "none",
//     duration: 1000,
//   });
// }
// // #endif
</script>

<style scoped>
.is-input-border {
  border: 0 !important;
}
.box {
  border-bottom: 2rpx solid #dcdfe6;
  border-top: 2rpx solid #dcdfe6;
  margin: 40rpx 0;
  height: 90rpx;
  text-align: center;
  display: flex;
  margin: 20rpx;
  align-items: center;
  justify-content: space-between;
}
.title {
  color: #999;
}
.picker-view {
  width: 100%;
  height: 420rpx;
  margin-top: 20rpx;
}
.item {
  line-height: 100rpx;
  text-align: center;
}
</style>